<template>
  <div class="libIncrease">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="content" ref="libEcharts"></div>
  </div>
</template>

<script>
import lRTitle from './lRTitle.vue';


export default {
  name: "libIncrease",
  components: {
    lRTitle
  },
  mounted() {
    this.createChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
  },
  data() {
    return {
      statusTitle: "事件趋势图",
      chartInstance: null  // 保存 ECharts 实例
    }
  },
  props: {
    barchartData: {
      type: Object
    }
  },
  watch: {
    barchartData: {
      deep: true,
      handler(val) {
        this.createChart(val)
      }
    }
  },
  methods: {
    createChart() {
      let { xAxis, t1, t2, t3, t4, t5 } = this.barchartData
      this.chartInstance = this.$echarts.init(this.$refs.libEcharts);
      const option = {
        color: ['#F56C6C', '#E6A23C', '#909399', '#409EFF', '#67C23A'],
        // 移除标题，因为图中没有“同期数据变化”
        title: {
          text: '单位：件',
          left: 'left',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        // ... 其他配置项
        legend: {
          right: 10,
          top: 0,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          itemWidth: 14,
          itemHeight: 2,
          itemGap: 10 // 增加图例项之间的间距
        },
        // 鼠标悬停提示框
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: '#fff',
          textStyle: {
            color: '#fff'
          }
        },
        // 网格设置
        grid: {
          left: 0,
          bottom: 0,
          right: "10px",
          containLabel: true,
          backgroundColor: '#141726' // 深色背景
        },
        // X 轴设置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis, // 与图中一致
          axisLine: {
            show: false // 隐藏轴线
          },
          axisTick: {
            show: false // 隐藏刻度
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4a4f69",
              type: 'dashed',
              opacity: 0.5
            }
          }
        },
        // Y 轴设置
        yAxis: {
          type: 'value',
          axisLine: {
            show: false // 隐藏轴线
          },
          axisTick: {
            show: false // 隐藏刻度
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#4A4F69', // 网格线颜色
              type: 'dashed' // 虚线
            }
          }
        },
        // 数据系列
        series: [
          {
            name: '紧急',
            type: 'line',
            data: t1, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: '#F56C6C', // 曲线颜色
              width: 2
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#F56C6C' }, // 渐变起始颜色
            //     { offset: 1, color: 'rgba(8, 33, 55)' } // 渐变结束颜色
            //   ])
            // },
          },
          {
            name: '重要',
            type: 'line',
            data: t2, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: '#E6A23C', // 曲线颜色
              width: 2
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#E6A23C' }, // 渐变起始颜色
            //     { offset: 1, color: 'rgba(8, 33, 55)' } // 渐变结束颜色
            //   ])
            // },
          },
          {
            name: '默认',
            type: 'line',
            data: t3, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: '#909399', // 曲线颜色
              width: 2
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#909399' }, // 渐变起始颜色
            //     { offset: 1, color: 'rgba(8, 33, 55)' } // 渐变结束颜色
            //   ])
            // },
          },
          {
            name: '普通',
            type: 'line',
            data: t4, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: '#409EFF', // 曲线颜色
              width: 2
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#409EFF' }, // 渐变起始颜色
            //     { offset: 1, color: 'rgba(8, 33, 55)' } // 渐变结束颜色
            //   ])
            // },
          },
          {
            name: '告知',
            type: 'line',
            data: t5, // 根据图中曲线调整数据
            smooth: true, // 平滑曲线
            lineStyle: {
              color: '#67C23A', // 曲线颜色
              width: 2
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#67C23A' }, // 渐变起始颜色
            //     { offset: 1, color: 'rgba(8, 33, 55)' } // 渐变结束颜色
            //   ])
            // },
          }
        ]
        // 移除 tooltip 和 dataZoom，因为图中没有这些功能
      };
      this.chartInstance.setOption(option);
    },
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
}
</script>

<style scoped>
.libIncrease {
  position: relative;
  height: 28%;
}

.content {
  height: 90%;
  padding: 20px;
}
</style>